<template>
	<view class="container">
		<view class="top-list">
			<view class="top-item" :class="item.ischeck?'toped-item':''" v-for="(item,index) in roomStatusTagList"
				:key="index" @click="selectStateHandle(item)">
				<view class="item-state"
					:style="{'background-color': getColor(index), 'border': index !==0 ? 'none' : ''}">

				</view>
				<view class="item-title" :class="item.ischeck?'item-titled':''">
					{{item.desc}}
				</view>
				<view class="item-title" :class="item.ischeck?'item-titled':''">
					{{item.count}}
				</view>
			</view>
			
			<view style="width: 84px;
		height: 30px;"></view>

			<view class="top-item">
				<view class="refrsh-btn" @click="refreshHandle">
					刷新
				</view>
			</view>

		</view>
		<view class="center-list">
			<view class="center-item" @tap="floorShow=true"
				:class="floorName!==''&&floorName!=='全部楼层'?'item-titled':''">
				{{floorName?floorName:'全部楼层'}}
			</view>
			<view class="center-item" @tap="roomShow=true" :class="roomName!==''&&roomName!=='全部房型'?'item-titled':''">
				{{roomName?roomName:'全部房型'}}
			</view>
		</view>
		<view class="bottom-list">
			<view class="bottom-item"
				:style="{'background-color': getHouseColor(item.roomStatusTag), 'color': item.roomStatusTag !==1 ? '#fff' : '#000', 'margin-left': getItemMarginLeft(index)}"
				v-for="(item,index) in roomStatusListData" :key="index">
				<span>{{item.no}}</span>
				<span v-if="item.orderInfo">{{maskedGuestName(item.orderInfo.guestName)}}</span>
				<span style="font-size: 28rpx;">{{item.roomTypeName}}</span>
			</view>


		</view>
		<u-picker mode="selector" v-model="floorShow" range-key="name" :default-selector="[0]" :range="floorList"
			@confirm="selectFloorHandle"></u-picker>
		<u-picker mode="selector" @confirm="selectRoomtypeHandle" v-model="roomShow" range-key="name"
			:default-selector="[0]" :range="roomTypeList"></u-picker>
	</view>
</template>

<script>
	import {
		roomStatus
	} from '../../api/house.js'
	export default {
		data() {
			return {
				roomStatusTagList: [], //房间状态列表
				floorShow: false, //楼层弹框
				roomShow: false, //房型弹框
				floorList: [], //楼层列表
				roomTypeList: [], //房型列表
				roomStatusList: [], //房间列表
				roomStatusListData: [], //备份房间列表
				floorName: '', //选中楼层
				floorId: '', //选中楼层id
				roomName: "", //选中房间类型
				roomId: "", //选中房间id
				stateList: [], //选中状态列表
			};
		},
		onShow() {
			this.getRoomStatusHandle()
		},
		watch: {
			stateList: {
				immediate: true,
				handler(newValue) {
					this.updateRoomStatusListData();
				}
			},
			roomId: {
				immediate: true,
				handler(newValue) {

					this.updateRoomStatusListData();
				}
			},
			floorId: {
				immediate: true,
				handler(newValue) {

					this.updateRoomStatusListData();
				}
			}
		},
		methods: {
			getItemMarginLeft(index) {
				// 检查当前项是否是每行的第二个或第三个项
				const row = Math.floor(index / 3);
				const itemInRow = index % 3;
				if (itemInRow === 1 || itemInRow === 2) {
					return '20rpx';
				}
				return '0';
			},
			maskedGuestName(guestName) {
				if (!guestName) return '';

				// 分割字符串获取姓名列表
				const names = guestName.split(',');
				// console.log(names)
				// 转换为姓氏加星号的形式
				const maskedNames = names.map(name => {
					// 找到第一个空格，假设名字是 "姓氏 名字" 的格式
					const spaceIndex = name.indexOf(' ');
					if (spaceIndex !== -1) {
						// 获取姓氏
						const surname = name.slice(0, spaceIndex);
						// 返回姓氏加一个星号
						if(surname){
							return surname + '∗';
						}else{
							return '';
						}
						
					}
					// 如果没有空格，直接返回原名字的首个字符加星号
					return name[0] + '∗';
				});

				// 将处理后的姓名合并为一个字符串
				return maskedNames.join(',');
			},
			updateRoomStatusListData() {

				if (this.stateList.length && this.roomId && this.floorId) {

					this.roomStatusListData = this.roomStatusList.filter(item =>
						this.stateList.includes(item.roomStatusTag) && item.roomTypeId === this.roomId && item
						.floorId === this.floorId
					);
				} else if (this.stateList.length && !this.roomId && !this.floorId) {
					this.roomStatusListData = this.roomStatusList.filter(item => this.stateList.includes(item
						.roomStatusTag))

				} else if (!this.stateList.length && this.roomId && !this.floorId) {
					this.roomStatusListData = this.roomStatusList.filter(item => item.roomTypeId === this.roomId);
				} else if (!this.stateList.length && !this.roomId && this.floorId) {
					this.roomStatusListData = this.roomStatusList.filter(item => item.floorId === this.floorId);
				} else if (this.stateList.length && this.roomId && !this.floorId) {
					this.roomStatusListData = this.roomStatusList.filter(item =>
						this.stateList.includes(item.roomStatusTag) && item.roomTypeId === this.roomId
					);
				} else if (this.stateList.length && !this.roomId && this.floorId) {
					this.roomStatusListData = this.roomStatusList.filter(item =>
						this.stateList.includes(item.roomStatusTag) && item.floorId === this.floorId
					);
				} else if (!this.stateList.length && !this.roomId && !this.floorId) {
					this.roomStatusListData = this.roomStatusList
				} else if (!this.stateList.length && this.roomId && this.floorId) {
					this.roomStatusListData = this.roomStatusList.filter(item =>
						item.floorId === this.floorId && item.roomTypeId === this.roomId
					);
				}

			},
			refreshHandle() {
				this.stateList = []
				this.floorId = ""
				this.floorName = ""
				this.roomId = ""
				this.roomName = ""
				this.getRoomStatusHandle()
			},
			selectStateHandle(item) {
				if (!item.ischeck) {
					this.stateList.push(item.code)
				} else {
					let index = this.stateList.findIndex(data => data == item.code)
					this.stateList.splice(index, 1)
				}
				item.ischeck = !item.ischeck
				console.log(this.stateList)
				// if(this.stateList.length){
				// 	this.roomStatusListData=this.roomStatusList.filter(item => this.stateList.includes(item.roomStatusTag))
				// }else{
				// 	this.roomStatusListData=this.roomStatusList
				// }


			},
			selectRoomtypeHandle(index) {
				if (index == 0) {
					this.roomName = this.roomTypeList[index].name
					this.roomId = ""
				} else {
					this.roomId = this.roomTypeList[index].id
					this.roomName = this.roomTypeList[index].name
				}


			},
			selectFloorHandle(index) {
				if (index == 0) {
					this.floorName = this.floorList[index].name
					this.floorId = ""
				} else {
					this.floorId = this.floorList[index].id
					this.floorName = this.floorList[index].name
				}

			},
			// 房间类型颜色
			getHouseColor(index) {
				// 定义颜色数组

				const colors = ['#fff', '#F6B536;', '#4E84F2', '#526585', '#E65D48', '#F5BFB7', '#49D39F'];

				return colors[index - 1]

			},
			// 状态颜色
			getColor(index) {
				// 定义颜色数组
				const colors = ['#fff', '#F6B536;', '#4E84F2', '#526585', '#E65D48', '#F5BFB7', '#49D39F'];
				return colors[index % colors.length];
			},
			// 获取当前房态列表
			async getRoomStatusHandle() {
				const res = await roomStatus()
				this.roomStatusTagList = res.data.roomStatusTagList
				this.stateList = []
				this.roomStatusTagList.forEach(item => {

					this.$set(item, 'ischeck', false)
				})
				this.floorList = res.data.floorList
				this.floorList.unshift({
					id: 0,
					name: "全部楼层"
				})
				this.roomTypeList = res.data.roomTypeList
				this.roomTypeList.unshift({
					id: 0,
					name: "全部房型"
				})
				this.roomStatusList = res.data.roomStatusList
				this.roomStatusListData = this.roomStatusList
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		background-color: #f7f7f7;
		min-height: 100vh;
		padding: 16rpx;
		padding-top: 0;
		box-sizing: border-box;
	}

	.top-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.toped-item {
		border: 1px solid #066AFB !important;
	}

	.top-item {
		margin-top: 16rpx;
		width: 84px;
		height: 30px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		// margin-right: 10rpx;

		box-sizing: border-box;
		border: 1px solid #C4C4C4;

		.item-state {
			width: 32rpx;
			height: 32rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.302);
			border-radius: 50%;
		}

		// .item-state:nth-child(1){
		// 	border: 1px solid rgba(0, 0, 0, 0.302);
		// }
		.item-title {
			margin-left: 6rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 24rpx;
			font-weight: 500;
			color: #767676;
		}

		.item-titled {
			color: #0256FF;
			font-weight: 500;
		}

		.refrsh-btn {
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 24rpx;
			font-weight: 500;
			color: #0256FF;
		}
	}

	.center-list {
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.center-item {
			width: 342rpx;
			height: 60rpx;
			border-radius: 10rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.3);
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 24rpx;
			font-weight: 500;
			text-align: center;
			line-height: 60rpx;



		}

		.item-titled {
			color: #0256FF;
			font-weight: 500;
			border: 1px solid #0256FF;
		}
	}

	.bottom-list {
		// margin-top: 16rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		flex-wrap: wrap;

		.bottom-item {

			margin-top: 18rpx;
			padding: 12rpx;
			box-sizing: border-box;
			width: 224rpx;
			height: 162rpx;
			border-radius: 10rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid #526585;
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 36rpx;
			font-weight: 500;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			span {
				white-space: nowrap; //禁止换行
				overflow: hidden;
				text-overflow: ellipsis; //...
			}
		}


	}
</style>